<template>
  <section class="t-container _m-2">
    <scroll :data="data" :loading="true" @loadMore="loadMore">
      <book-list :bookList="data"></book-list>
    </scroll>
  </section>
</template>

<script>
import Scroll from 'components/Scroll'
import BookList from '../../../components/BookList'

import {getBooksList} from 'api/BooksApi'


export default {
  name: 'Search',
  components: {
    Scroll,
    BookList
  },
  props: {
    searchValue: String
  },
  data () {
    return {
      data: [],
      search: {
        scrollId: "",
        searchValue: this.searchValue
      },
      tmp: []
    }
  },
  methods: {
    loadMore(currentIndex, $scroll) {
      this.getBooksList()

      if(this.tmp.length == 0)
        $scroll.forceUpdate();
    },
    getBooksList () {
      this.tmp = []
      getBooksList (this.search)
        .then(res => {
          if(res.meta.success) {
            this.tmp = res.data.data
            this.data = this.data.concat(this.tmp);
            this.search.scrollId = res.data.pagination.scrollId
          }
        }); 
    }
  },
  created () {
    this.getBooksList();  
  },
  watch: {
    searchValue (newSearchValue) {
      this.data = []
      this.search.searchValue = newSearchValue
      this.getBooksList();  
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl'
section {
  background #FFF
}
</style>
